<!--
 * @Author: your name
 * @Date: 2021-07-12 15:48:16
 * @LastEditTime: 2021-11-12 16:02:26
 * @LastEditors: Please set LastEditors
 * @Description: Common feed form
 * @FilePath: \jinfeng_up\src\components\Feedback\Feedback.vue
-->
<template>
  <div class="createFeedBack">
    <div class="header">
      <div class="header_left">
        <span class="left_btn" @click="toFeedBack"></span>
        <span class="left_txt">反馈总览 - 创建反馈</span>
      </div>
      <div class="header_right header_btn">
        <el-button type="primary" size="small" @click="sendCancel">取消</el-button>
        <el-button type="primary" size="small" @click="getMsgFormSon">存草稿</el-button>
        <el-button type="primary" size="small" @click="getMsgFormSonS('dynamicValidateForm')">发布</el-button>
      </div>
    </div>
    <div class="create_container">
      <el-form
        class="createFeedBackForm"
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-position="left"
        label-width="140px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="产品名称"
              class="ProductionName"
              prop="productId"
              :rules="{
                required: true,
                message: '请选择产品名称',
                trigger: 'change'
              }"
            >
              <el-select
                class="userSelect"
                v-model="dynamicValidateForm.productId"
                placeholder="请选择产品名称"
                filterable
                clearable
                @change="productionChange"
              >
                <el-option v-for="(item, index) in ProductList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="营销项目名称"
              prop="marketProjectSecond"
              :rules="{
                required: true,
                message: '请选择营销项目名称',
                trigger: 'change'
              }"
            >
              <el-select
                class="userSelect"
                v-model="dynamicValidateForm.marketProjectSecond"
                placeholder="请选择营销项目名称"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, index) in MarketingProjectName"
                  :key="index"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="版本号"
              id="lengthLimit"
              prop="versionNumber"
              :rules="{
                required: true,
                message: '请输入版本号',
                trigger: 'blur',
                min: 1,
                max: 20,
                message: '请输入版本号,长度在 0 到 20 个字符',
                trigger: 'blur'
              }"
            >
              <el-input class="userInput" v-model="dynamicValidateForm.versionNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="营销项目状态"
              class="Marketing"
              prop="marketProjectFirst"
              :rules="{
                required: true,
                message: '请选择营销项目状态',
                trigger: 'change'
              }"
            >
              <el-select
                class="userSelect"
                v-model="dynamicValidateForm.marketProjectFirst"
                placeholder="请选择营销项目状态"
                clearable
                filterable
              >
                <el-option v-for="(item, index) in problemTypeList" :key="index" :label="item.title" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="反馈来源"
              class="DesignatedPerson"
              prop="feedBackSource"
              :rules="{
                required: true,
                message: ' ',
                trigger: 'change'
              }"
            >
              <el-select
                class="userSelect"
                v-model="dynamicValidateForm.feedBackSource"
                placeholder="请选择反馈来源"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, index) in feedBackSourceList"
                  :key="index"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="指派人"
              class="DesignatedPerson"
              prop="userId"
              :rules="{
                required: true,
                message: ' ',
                trigger: 'change'
              }"
            >
              <el-select
                class="userSelect"
                v-model="dynamicValidateForm.userId"
                placeholder="请选择指派人"
                clearable
                filterable
              >
                <el-option v-for="(item, index) in UserList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="所处阶段"
              class="ProductionName"
              prop="stage"
              :rules="{
                required: true,
                message: ' ',
                trigger: 'change'
              }"
            >
              <el-select
                class="userSelect"
                v-model="dynamicValidateForm.stage"
                placeholder="请选择处理阶段"
                clearable
                filterable
                disabled
              >
                <el-option v-for="(item, index) in childStageList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建人">
              <el-input disabled class="userInput" v-model="userInfo.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建人部门">
              <el-input disabled class="userInput" v-model="userInfo.department"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 以下都是可动态增加的表单项 -->

        <div
          v-for="(feedBackInputs, index) in dynamicValidateForm.feedBackInputs"
          :key="feedBackInputs.key"
          class="feedBackitem"
        >
          <!-- 栏目提示 -->
          <div class="columnTips">
            <span class="blue_square"></span>
            <span class="column_title">反馈详情描述</span>
            <div class="line_through"></div>
            <!-- <div class="insert_option_btn">
              <span class="insertOne" @click="addfeedBackInputs">新增</span>
              <span class="deleteOne" @click.prevent="removefeedBackInputs(feedBackInputs)" v-if="index != 0"
                >删除</span
              >
            </div> -->
          </div>
          <el-row>
            <el-form-item
              class="Marketing"
              label="标题"
              :prop="'feedBackInputs.' + index + '.title'"
              :rules="{
                required: true,
                message: '标题不能为空',
                trigger: 'blur'
              }"
            >
              <el-input v-model="feedBackInputs.title" class="userInputTitle"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="问题大类"
                class="DesignatedPerson"
                :prop="'feedBackInputs.' + index + '.problemTypeParentId'"
              >
                <el-select
                  class="userSelect"
                  clearable
                  @change="changeBigCatlog($event, index)"
                  v-model="feedBackInputs.problemTypeParentId"
                  placeholder="请选择问题大类"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in marketProjectFirstList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="问题小类"
                class="DesignatedPerson"
                :prop="'feedBackInputs.' + index + '.problemTypeId'"
              >
                <el-select
                  class="userSelect"
                  v-model="feedBackInputs.problemTypeId"
                  placeholder="请选择问题小类"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="(item, index) in marketProjectSecondList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item
                label="问题描述"
                :prop="'feedBackInputs.' + index + '.problemDescribe'"
                class="questionDesc"
                :rules="{
                  required: true,
                  message: '请输入问题描述',
                  trigger: 'blur'
                }"
              >
                <div class="isShowError" @click="indexinfluenceDescribe(index)">
                  <!-- <socialUpload
                  :contentDefault="feedBackInputs.problemDescribe"
                  @getContent="getProblemDescribeContent"
                ></socialUpload> -->
                  <el-upload
                    class="avatar-uploader quill-img"
                    :action="fileUpload"
                    :on-change="imgSaveToUrl"
                    :headers="importHeaders"
                    :show-file-list="false"
                    :on-success="quillImgSuccess"
                    :on-error="uploadError"
                    :before-upload="quillImgBefore"
                    accept=".jpg,.jpeg,.png,.gif"
                  ></el-upload>
                  <quill-editor
                    class="editor"
                    v-model="feedBackInputs.problemDescribe"
                    :options="editorOption"
                    :ref="'quillEditor' + index"
                  >
                  </quill-editor>
                  <!-- <vue-tinymce v-model="feedBackInputs.problemDescribe"
                                 :setting="setting" /> -->
                  <!-- <tinymceeditor v-model="feedBackInputs.problemDescribe"
                                 ref="tinymceeditor" /> -->
                  <!-- <quill-editor v-model="feedBackInputs.problemDescribe"
                    ref="notesQuillEditor"> </quill-editor> -->
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="初步排查结果"
                :prop="'feedBackInputs.' + index + '.excludeResult'"
                class="questionDesc"
                :rules="{
                  required: true,
                  message: '请输入初步排查结果',
                  trigger: 'blur'
                }"
              >
                <div class="isShowError" @click="indexinfluenceDescribe(index)">
                  <!-- <socialUpload
                  :contentDefault="feedBackInputs.excludeResult"
                  @getContent="getExcludeResultContent"
                ></socialUpload> -->
                  <el-upload
                    class="avatar-uploader quill-img1"
                    :action="fileUpload"
                    :on-change="imgSaveToUrl2"
                    :headers="importHeaders"
                    :show-file-list="false"
                    :on-success="quillImgSuccess2"
                    :on-error="uploadError2"
                    :before-upload="quillImgBefore2"
                    accept=".jpg,.jpeg,.png,.gif"
                  ></el-upload>
                  <quill-editor
                    class="editor"
                    v-model="feedBackInputs.excludeResult"
                    :options="editorOption2"
                    :ref="'quillEditorAr' + index"
                  >
                  </quill-editor>
                  <!-- <vue-tinymce v-model="feedBackInputs.excludeResult"
                                 :setting="setting" /> -->
                  <!-- <tinymceeditor v-model="feedBackInputs.excludeResult"
                                 ref="tinymceeditor" /> -->
                  <!-- <quill-editor v-model="feedBackInputs.excludeResult"
                                  ref="notesQuillEditor"> </quill-editor> -->
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="是否服务请求"
                :prop="'feedBackInputs.' + index + '.serverRequestTag'"
                :rules="{
                  required: true,
                  message: '请选择是否服务请求',
                  trigger: 'change'
                }"
              >
                <el-select
                  class="userSelect"
                  v-model="feedBackInputs.serverRequestTag"
                  placeholder="请选择是否服务请求"
                >
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                v-if="feedBackInputs.serverRequestTag"
                label="服务请求编号"
                class="Marketing"
                :prop="'feedBackInputs.' + index + '.serverRequestNumber'"
                :rules="{
                  required: true,
                  message: '请选择请求编号',
                  trigger: 'change'
                }"
              >
                <el-input class="userInput" v-model="feedBackInputs.serverRequestNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!--  :picker-options="pickerOptions" -->
              <el-form-item
                label="服务请求创建时间"
                v-if="feedBackInputs.serverRequestTag"
                :prop="'feedBackInputs.' + index + '.serverRequestTime'"
                :rules="[{ required: true, message: '请选择服务请求时间', trigger: 'blur' }]"
              >
                <el-date-picker
                  class="userSelect"
                  v-model="feedBackInputs.serverRequestTime"
                  type="date"
                  placeholder=""
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="影响类别 "
                class="VersionNum"
                :prop="'feedBackInputs.' + index + '.influenceCategory'"
                :rules="{
                  required: true,
                  message: '请选择影响类别',
                  trigger: 'change'
                }"
              >
                <el-select
                  class="userSelect"
                  v-model="feedBackInputs.influenceCategory"
                  placeholder="请选择影响类别"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="(item, index) in influenceCategory"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="期望完成时间" class="DesignatedPerson serviceRequestNum">
                <el-date-picker
                  class="userSelect"
                  default-value=""
                  :picker-options="pickerOptions"
                  v-model="feedBackInputs.expirationDate"
                  type="date"
                  placeholder="请选择期望完成时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item
                label="影响描述"
                :prop="'feedBackInputs.' + index + '.influenceDescribe'"
                class="questionDesc"
              >
                <div class="isShowError" @click="indexinfluenceDescribe(index)">
                  <!-- <socialUpload
                  :contentDefault="feedBackInputs.influenceDescribe"
                  @getContent="getInfluenceDescribeContent"
                ></socialUpload> -->
                  <el-upload
                    class="avatar-uploader quill-img2"
                    :action="fileUpload"
                    :on-change="imgSaveToUrl3"
                    :headers="importHeaders"
                    :show-file-list="false"
                    :on-success="quillImgSuccess3"
                    :on-error="uploadError3"
                    :before-upload="quillImgBefore3"
                    accept=".jpg,.jpeg,.png,.gif"
                  ></el-upload>
                  <quill-editor
                    class="editor"
                    v-model="feedBackInputs.influenceDescribe"
                    :options="editorOption3"
                    :ref="'quillEditorInflu' + index"
                  >
                  </quill-editor>
                  <!-- <vue-tinymce v-model="feedBackInputs.influenceDescribe"
                                 :setting="setting" /> -->
                  <!-- <tinymceeditor v-model="feedBackInputs.influenceDescribe"
                                 ref="tinymceeditor" /> -->
                  <!-- <quill-editor v-model="feedBackInputs.influenceDescribe"
                                  ref="notesQuillEditor"> </quill-editor> -->
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="添加附件" class="uploadFiles" :prop="'feedBackInputs.' + index + '.fileUrl'">
                <br />
                <el-upload
                  class="upload-demo"
                  :action="fileUpload"
                  :on-success="
                    (res, file) => {
                      return onFileSuccess(res, file, index);
                    }
                  "
                  :on-error="onFileError"
                  :on-remove="
                    (res, file) => {
                      return onFileRemove(res, file, index);
                    }
                  "
                  :on-preview="handlePreview"
                  :data="{
                    checkOfficeFmt: false,
                    isTmp: false,
                    fileType: 'feedback'
                  }"
                  :objectBind="index"
                  multiple
                  :file-list="encLosureList"
                >
                  <el-button size="small" type="primary" style="margin-top: 6px">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="columnTipss">
            <span class="blue_square"></span>
            <span class="column_title">新增反馈描述</span>
            <div class="line_through"></div>
            <div class="insert_option_btn">
              <span class="insertOne" @click="addfeedBackInputs">新增</span>
              <span class="deleteOne" @click.prevent="removefeedBackInputs(feedBackInputs)" v-if="index != 0"
                >删除</span
              >
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <el-dialog title="提示" :visible.sync="$store.state.showItem" :close-on-click-modal="false" width="25%">
      <span>确定离开当前页面吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogComfire">离 开</el-button>
        <el-button type="primary" @click="dialogGetMsgFormSon">存草稿</el-button>
        <el-button type="primary" @click="dialogGetMsgFormSons">发 布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api/feedBack/api'
import { FormOptionSet } from '@/api/setting/service.js'
// import tinymceeditor from '@/components/tinymceEditer/tinymceEditer.vue'
// import socialUpload from '@/components/socialUpload/socialUpload.vue'
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    ['blockquote', 'code-block'], // 引用  代码块
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表z
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ align: [] }], // 对齐方式
    ['clean'], // 清除文本格式
    ['image'] // 图片、视频
]
import store from '@/store/index'
import { FeedBack } from '@/api/feedBack/server'
export default {
    name: '',
    components: {
    // tinymceeditor,
    // socialUpload
    },
    props: {},
    data() {
        var mytoken = localStorage.getItem('token') // 要保证取到
        return {
            pickerOptions: {
                disabledDate(time) {
                    const _now = Date.now()
                    const seven = 1 * 24 * 60 * 60 * 1000
                    const sevenDays = _now - seven
                    return time.getTime() < sevenDays
                }
            },
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.quill-img input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                },
                placeholder:
          '1、写清楚程序版本 2、问题描述（区分 是新部署出现问题，还是升级出现问题，还是现场进行了其它什么相关操作，还是之前一直好好的突然出现的 这几种场景）'
            },
            editorOption2: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.quill-img1 input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                },
                placeholder:
          '1、现场定位（现场进行了哪些排查操作，各个排查手段的输出结果是什么）2、日志（问题时刻异常日志截图+完成日志）'
            },
            editorOption3: {
                placeholder: '请输入影响描述',
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.quill-img2 input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                }
            },
            // 本地路径
            localFile: {},
            localFile2: {},
            localFile3: {},
            // 本地图片
            loadImageNow: '',
            loadImageNow2: '',
            loadImageNow3: '',
            /* 得到token */
            importHeaders: { token: mytoken },
            // 离开页面弹出框
            dialogVisible: false,
            // 文件上传
            fileUpload: `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/file/upload`,
            // 当前人信息
            userInfo: {},
            encLosureList: [],
            // 点击的index值
            changIndex: 0,
            // 创建反馈表单
            dynamicValidateForm: {
                feedBackInputs: [
                    {
                        title: null,
                        problemDescribe: '',
                        excludeResult: '',
                        serverRequestTag: false,
                        serverRequestNumber: null,
                        serverRequestTime: null,
                        expirationDate: null,
                        influenceDescribe: '',
                        problemTypeId: null,
                        problemTypeParentId: null,
                        isService: null,
                        influenceCategory: null,
                        fileUrl: []
                    }
                ],
                productId: null,
                userId: null,
                draftTag: null,
                versionNumber: null,
                marketProjectFirst: null,
                marketProjectSecond: null,
                feedBackSource: null,
                stage: '1423154037607493634'
            },

            // 动态控制服务是否开启
            // radio: 'false',

            // 产品列表
            ProductList: [],

            // 指派人列表
            UserList: [],

            // 营销项目名称列表
            marketProjectFirstList: [],

            // 营销项目状态列表
            marketProjectSecondList: [],

            // 反馈来源列表
            feedBackSourceList: [],

            // 问题类型列表
            problemTypeList: [],

            // 阶段列表
            // stageList: [],
            childStageList: [],

            // 影响类别列表
            influenceCategory: [],
            // accountInformation: {},
            MarketingProjectName: []
            //     setting: {
            //         branding: false,
            //         menubar: false,
            //         toolbar:
            //   'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
            //         toolbar_drawer: 'sliding',
            //         quickbars_selection_toolbar:
            //   'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
            //         plugins: 'link image  table lists fullscreen',
            //         language: 'zh_CN',
            //         init_instance_callback: editor => {
            //             if (this.content) {
            //                 editor.setContent(this.content)
            //             }
            //             this.finishInit = true
            //             editor.on('NodeChange Change SetContent KeyUp', () => {
            //                 this.hasChanged = true
            //             })
            //         }, // 上传图片
            //         convert_urls: false,
            //         automatic_uploads: true, // 开启点击图片上传时，自动进行远程上传操作
            //         images_upload_base_path: `${process.env.VUE_APP_GOLDWIND_BASE_API}`, // 图片上传的基本路径
            //         images_upload_url: '/v2/file/upload',
            //         images_upload_handler: (blobInfo, success, failure) => {
            //             var xhr, formData

            //             xhr = new XMLHttpRequest()
            //             xhr.withCredentials = false
            //             xhr.open('POST', `${process.env.VUE_APP_GOLDWIND_BASE_API}` + '/v2/file/upload')
            //             xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token)
            //             // xhr.setRequestHeader('token', localStorage.getItem('token'));

            //             formData = new FormData()
            //             formData.append('file', blobInfo.blob())

            //             formData.append('checkOfficeFmt', false)
            //             formData.append('isTmp', false)
            //             xhr.onload = function(e) {
            //                 var json
            //                 console.log(e, xhr)
            //                 console.log(this)

            //                 if (xhr.errcode == '0') {
            //                     failure('服务器错误:' + xhr.msg)
            //                     return
            //                 }
            //                 json = JSON.parse(this.responseText)
            //                 if (!json.data || typeof json.data.fileSourceId != 'string') {
            //                     failure('服务器错误')
            //                     return
            //                 }
            //                 success(
            //                     `${process.env.VUE_APP_GOLDWIND_BASE_API}` +
            //       '/v2/file/download?' +
            //       '&fileSourceId=' +
            //       json.data.fileSourceId
            //                 )
            //             }
            //             xhr.send(formData)
            //         },
            //         image_advtab: false,
            //         language_url: 'tinymce/langs/zh_CN.js', // 语言包的路径
            //         elementpath: false, // 隐藏元素路径，不明白的可以切换true/false观察页面
            //         statusbar: false,
            //         resize: false,
            //         height: 200
            //     }
        }
    },
    computed: {
        aboutProblemDescribe() {
            let str = 'quillEditor'
            str += this.changIndex
            return str
        },
        aboutStartResult() {
            let str = 'quillEditorAr'
            str += this.changIndex
            return str
        },
        aboutInfluence() {
            let str = 'quillEditorInflu'
            str += this.changIndex
            return str
        }
    },
    watch: {
        '$store.state.showItem': function(newVal, oldVal) {
            console.log(newVal, oldVal)
            if (newVal === true) {
                store.commit('setShowItem', true)
                // this.dialogVisible = true
            }
        }
    },
    created() {},
    mounted() {
    /* 数据字典 */
        this.getProductList()
        // this.getStageList()
        this.getChildStageList()
        // this.getuserId()
        // this.getMarketProjectFirstList('MARKETING_PROJECT_NAME') // 营销项目名称
        // this.getMarketProjectFirstList('MARKETING_PROJECT_BIG') // 营销项目状态
        // this.getMarketProjectFirstList('MARKETING_PROJECT_SMALL')
        // this.getMarketProjectFirstList('SOURCE_FEEDBACK') // 反馈来源列表
        // this.getMarketProjectFirstList('PROBLEM_TYPES') // 问题类型列表
        // this.getMarketProjectFirstList('IMPACT_CATEGORY') // 影响类别列表
        this.getMarketProjectFirstList()
        this.UserGetUserInfoAsync() // 当前人信息
        store.commit('setShowItem', false)
        store.commit('setShowState', true)
        this.dynamicValidateForm = {
            feedBackInputs: [
                {
                    title: null,
                    problemDescribe: null,
                    excludeResult: null,
                    serverRequestTag: false,
                    serverRequestNumber: null,
                    serverRequestTime: null,
                    expirationDate: null,
                    influenceDescribe: null,
                    problemTypeId: null,
                    problemTypeParentId: null,
                    isService: null,
                    influenceCategory: null,
                    fileUrl: []
                }
            ],
            productId: null,
            userId: null,
            draftTag: null,
            versionNumber: null,
            marketProjectFirst: null,
            marketProjectSecond: null,
            feedBackSource: null,
            stage: '1423154037607493634'
        }
    },
    methods: {
        // 通过选择问题大类 确认问题小类列表
        changeBigCatlog(val, index) {
            console.log(val)
            console.log(this.marketProjectFirstList[index])
            let list = []
            this.marketProjectFirstList.forEach(element => {
                if (element.id == val) {
                    list = element.children
                }
            })
            this.dynamicValidateForm.feedBackInputs[index].problemTypeId = ''
            this.marketProjectSecondList = list
            // console.log(this.marketProjectFirstList[index])
        },
        /* 获取当前人员信息 */
        async UserGetUserInfoAsync() {
            try {
                const result = await FeedBack.UserGetUserInfoAsync()
                if (result.success) {
                    this.userInfo = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 产品相关开始 */

        // 获取所有产品信息
        async getProductList() {
            try {
                const result = await FeedBack.getProductListByCurrentUser()
                if (result.success) {
                    this.ProductList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },
        // async getuserId() {
        //     try {
        //         const result = await FeedBack.UserGetUserInfoAsync()
        //         if (result.success) {
        //             console.log('获取当前账号信息', result.data)
        //             this.accountInformation = result.data
        //         }
        //     } catch (err) {
        //         console.log(err)
        //     }
        // },

        // 产品名称选择器 (选择改变指派人)
        async productionChange(_val) {
            // 根据产品ID获得指派人列表
            try {
                const result = await FeedBack.GetListItemAsync({ id: _val })
                this.dynamicValidateForm.userId = null
                this.UserList = []
                if (result.success) {
                    const arr = JSON.parse(JSON.stringify(result.data))
                    const index = ''
                    for (var i = 0; i < arr.length; i++) {
                        const item = arr[i]
                        if (item.id === this.userInfo.id) {
                            arr.splice(i, 1)
                        }
                    }
                    if (index != '') {
                        arr.splice(index, 1)
                    }
                    this.UserList = arr
                }
            } catch (err) {
                console.log(err)
            }
        },

        //  判断是否服务请求
        // isServerRequestChange(_val) {
        //     console.log(_val)
        //     this.isServerOpen = _val
        // },

        /* 产品相关结束 */

        // 获取相关下拉列表(type)
        async getMarketProjectFirstList() {
            try {
                const result = await FormOptionSet.FormOptionSetGetAllAsync()
                if (result.success) {
                    this.buildTemplateData(result.data)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        // 数据拆分
        buildTemplateData(_data) {
            this.MarketingProjectName = _data.marketProjectName
            this.problemTypeList = _data.problemTypeSets
            this.influenceCategory = _data.impactCategorySets
            // this.marketProjectSecondList = _data.marketProjectsSmall
            this.feedBackSourceList = _data.sourceFeedbackSets
            this.marketProjectFirstList = _data.marketProjects
        },
        // async getMarketProjectFirstList(type) {
        //     if (type == 'MARKETING_PROJECT_BIG') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.marketProjectFirstList = result.data
        //                 console.log('M', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'SOURCE_FEEDBACK') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.feedBackSourceList = result.data
        //                 console.log('S', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'MARKETING_PROJECT_SMALL') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.marketProjectSecondList = result.data
        //                 console.log('S', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'IMPACT_CATEGORY') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.influenceCategory = result.data
        //                 console.log('P', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'MARKETING_PROJECT_NAME') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.MarketingProjectName = result.data
        //                 console.log('P', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.problemTypeList = result.data
        //                 console.log('P', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     }
        // },

        // 获取所有阶段列表

        // async getStageList() {
        //     try {
        //         const result = await FeedBack.GetStageListAsync({ type: 'NAME' })
        //         if (result.success) {
        //             this.stageList = result.data
        //         }
        //     } catch (err) {
        //         console.log(err)
        //     }
        // },

        // 获取所有阶段列表
        async getChildStageList() {
            try {
                const result = await FeedBack.GetListChildrenAsync({ type: 'NAME' })
                if (result.success) {
                    this.childStageList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 上传成功回调函数
     * @param {Object} _response 上传成功返回
     * @param {Object} _file 上传文件
     * @param {Number} _index 索引值
     */
        onFileSuccess(_response, _file, _index) {
            console.log(_file)
            console.log(_response)
            console.log(_index)

            if (_response.msg === '成功') {
                console.log('this.dynamicValidateForm', this.dynamicValidateForm)
                this.dynamicValidateForm.feedBackInputs[_index].fileUrl.push({
                    name: _response.data.sourceName,
                    url: _response.data.fileSourceId
                })
            } else {
                this.$message.error(_response.message || '上传失败111')
            }
        },
        // 文件上传失败
        onFileError() {
            this.$message.error('上传失败11111')
        },
        // 文件移除成功
        onFileRemove(_file, _fileList, _index) {
            console.log(_file, _fileList, _index)
            for (const item of _fileList) {
                this.dynamicValidateForm.feedBackInputs[_index].fileUrl.push({
                    name: item.response.data.sourceName,
                    url: item.response.data.fileSourceId
                })
            }
        },
        // 点击下载
        async handlePreview(file) {
            if (file.response.data) {
                const data = file.response.data
                window.location.href = `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/file/download?fileSourceId=${data.fileSourceId}`
            }
        },
        // 删除按钮
        removefeedBackInputs(item) {
            var index = this.dynamicValidateForm.feedBackInputs.indexOf(item)
            if (index !== -1) {
                this.dynamicValidateForm.feedBackInputs.splice(index, 1)
            }
        },
        // 新增按钮
        addfeedBackInputs() {
            this.dynamicValidateForm.feedBackInputs.push({
                title: null,
                problemDescribe: '',
                excludeResult: '',
                serverRequestTag: false,
                serverRequestNumber: null,
                serverRequestTime: null,
                expirationDate: null,
                influenceDescribe: '',
                problemTypeId: null,
                problemTypeParentId: null,
                isService: null,
                influenceCategory: null,
                fileUrl: []
            })
        },

        // 存草稿方法
        async getMsgFormSon() {
            //  console.log(formName);
            if (this.dynamicValidateForm.productId != null && this.dynamicValidateForm.productId != '') {
                const loading = this.$loading({
                    lock: true,
                    text: '数据传输中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                this.dynamicValidateForm.draftTag = true
                const feedBackInputs = this.dynamicValidateForm.feedBackInputs
                for (var i = 0; i < feedBackInputs.length; i++) {
                    const fileUrl = feedBackInputs[i].fileUrl
                    if (fileUrl != [] && fileUrl != null) {
                        const strs = JSON.stringify(fileUrl)
                        feedBackInputs[i].fileUrl = strs.substring(1, strs.length - 1)
                    } else {
                        feedBackInputs[i].fileUrl = null
                    }
                }

                try {
                    const result = await FeedBack.InsertAsync(this.dynamicValidateForm)
                    if (result.success) {
                        loading.close()
                        store.commit('setShowState', false)
                        this.$router.push('/feedBack')
                    } else {
                        loading.close()
                        store.commit('setShowState', false)
                        this.$router.push('/feedBack')
                    }
                } catch (err) {
                    loading.close()
                    console.log(err)
                }
            } else {
                this.$message.error('请选择产品名称')
            }
        },
        // 发布方法
        getMsgFormSonS(formName) {
            const feedBackInputs = this.dynamicValidateForm.feedBackInputs
            for (var i = 0; i < feedBackInputs.length; i++) {
                const fileUrl = feedBackInputs[i].fileUrl
                if (fileUrl != [] && fileUrl != null) {
                    const strs = JSON.stringify(fileUrl)
                    console.log('strs.substring(1, strs.length - 1)', strs.substring(1, strs.length - 1))
                    feedBackInputs[i].fileUrl = strs.substring(1, strs.length - 1)
                } else {
                    feedBackInputs[i].fileUrl = null
                }
            }
            console.log(formName)
            this.dynamicValidateForm.fi
            console.log('this.dynamicValidateForm', this.dynamicValidateForm)

            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.send()
                } else {
                    this.$message.error('请把必填项 填写完整')
                }
            })
        },
        // 发布函数
        async send() {
            const loading = this.$loading({
                lock: true,
                text: '数据传输中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.dynamicValidateForm.draftTag = false
            try {
                const result = await FeedBack.InsertAsync(this.dynamicValidateForm)
                if (result.success) {
                    loading.close()
                    store.commit('setShowState', false)
                    this.$router.push('/feedBack')
                } else {
                    store.commit('setShowState', false)
                    loading.close()
                    this.$router.push('/feedBack')
                }
            } catch (err) {
                loading.close()
                console.log(err)
            }
        },
        // 取消按钮
        sendCancel() {
            store.commit('setShowState', false)
            this.$router.go(-1)
        },
        // 返回按钮
        toFeedBack() {
            // this.dialogVisible = true
            store.commit('setShowItem', true)
        },
        // 确定按钮
        dialogComfire() {
            store.commit('setShowState', false)
            this.dynamicValidateForm = {
                feedBackInputs: [
                    {
                        title: null,
                        problemDescribe: null,
                        excludeResult: null,
                        serverRequestTag: false,
                        serverRequestNumber: null,
                        serverRequestTime: null,
                        expirationDate: null,
                        influenceDescribe: null,
                        problemTypeId: null,
                        problemTypeParentId: null,
                        isService: null,
                        influenceCategory: null
                    }
                ],
                productId: null,
                userId: null,
                draftTag: null,
                versionNumber: null,
                marketProjectFirst: null,
                marketProjectSecond: null,
                feedBackSource: null,
                stage: ''
            }

            if (store.state.toPath != null && store.state.toPath != '') {
                store.commit('setShowItem', false)
                this.$router.push({
                    path: store.state.toPath
                })
            } else {
                store.commit('setShowItem', false)
                this.$router.push('/feedBack')
            }
        },
        // 模态框存草稿按钮
        dialogGetMsgFormSon() {
            this.dialogVisible = false
            this.getMsgFormSon()
        },
        // 模态框发布按钮
        dialogGetMsgFormSons() {
            this.dialogVisible = false
            this.getMsgFormSons('dynamicValidateForm')
        },
        // 获取影响描述内容
        getInfluenceDescribeContent(Value) {
            this.dynamicValidateForm.feedBackInputs[this.changIndex].influenceDescribe = Value
        },
        // 获取初步排查结果内容
        getExcludeResultContent(Value) {
            this.dynamicValidateForm.feedBackInputs[this.changIndex].excludeResult = Value
        },
        // 问题描述
        getProblemDescribeContent(Value) {
            this.dynamicValidateForm.feedBackInputs[this.changIndex].problemDescribe = Value
        },
        // 获取下标
        indexinfluenceDescribe(index) {
            this.changIndex = index
        },

        /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore(file) {
            const fileType = file.type
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                return true
            } else {
                this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
                return false
            }
        },
        /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore2(file) {
            const fileType = file.type
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                return true
            } else {
                this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
                return false
            }
        },
        /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore3(file) {
            const fileType = file.type
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                return true
            } else {
                this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
                return false
            }
        },
        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess(res) {
            // 如果上传成功
            if (res.errcode == '0') {
                const pickUrl = Api.fileUploadAboutEditor + '?fileSourceId=' + res.data.fileSourceId
                const quill = this.$refs[`${this.aboutProblemDescribe}`][0].quill
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', pickUrl)
            } else {
                this.$message.error('图片插入失败')
            }
        },
        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess2(res) {
            // 如果上传成功
            if (res.errcode == '0') {
                const pickUrl = Api.fileUploadAboutEditor + '?fileSourceId=' + res.data.fileSourceId
                const quill = this.$refs[`${this.aboutStartResult}`][0].quill
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', pickUrl)
            } else {
                this.$message.error('图片插入失败')
            }
        },
        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess3(res) {
            // 如果上传成功
            if (res.errcode == '0') {
                const pickUrl = Api.fileUploadAboutEditor + '?fileSourceId=' + res.data.fileSourceId
                const quill = this.$refs[`${this.aboutInfluence}`][0].quill
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', pickUrl)
            } else {
                this.$message.error('图片插入失败')
            }
        },

        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },
        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError2() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },
        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError3() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },

        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl(file) {
            // 也可以用file
            this.localFile = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                this.loadImageNow = reader.result
            }
        },
        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl2(file) {
            // 也可以用file
            this.localFile2 = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile2) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                this.loadImageNow2 = reader.result
            }
        },
        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl3(file) {
            // 也可以用file
            this.localFile3 = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile3) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                this.loadImageNow3 = reader.result
            }
        }
    }
}
</script>

<style scoped lang="less" src="./createFeedBack.less"></style>
<style scoped>
::v-deep .ql-editor li {
  list-style-type: decimal !important;
  list-style-position: inside !important;
}
::v-deep .ql-editor ul > li:before {
  content: '\2022';
}

::v-deep .ql-editor ul > li::marker {
  content: '';
  display: none;
}

::v-deep .ql-editor li:before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
::v-deep #lengthLimit > .el-form-item__content .el-form-item__error {
  top: 44px;
  left: 10px;
}
</style>
